// 组件不需要更新时返回false跳过渲染过程
import React, { Component } from "react";

class ShouldComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: '',
        age: ''
      }
    }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    // 更新颜色
    if (this.state.name  !== nextState.name ) {
      return true;
    }else{
        return false;
    }
  }
  changeColor = () => {
    this.setState({
      name: 'red',
      age: 'green'
    })
  }
  render() {
    return (
      <div>
        <h1>选择性高兴</h1>
        <button onClick={this.changeColor} >name变红，age变绿</button>
        <p style={{color:this.state.name}}>name</p>
        <p style={{color:this.state.age}}>age</p>
      </div>
    )
  }
}
export default ShouldComponent;